<template>
  <!-- <van-swipe :autoplay="3000" lazy-render>
    <van-swipe-item v-for="image in images" :key="image">
      < img :src="image" />
    </van-swipe-item>
  </van-swipe> -->
  <div ref="vantaRef" v-bind:style="{height: windowHeight+'px'}"></div>
</template>

<script>
import * as THREE from "../../node_modules/three/build/three.min.js";
import BIRDS from "../../node_modules/vanta/src/vanta.birds.js";
export default {
  data() {
    return {
      windowHeight: document.documentElement.clientHeight,
      images: [
        "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
        "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
      ],
    };
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
  mounted() {
    this.vantaEffect = BIRDS({
      el: this.$refs.vantaRef,
      THREE: THREE,
    });
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        this.windowHeight = window.fullHeight;
      })()
    };
  },
};
</script>
<style>
</style>